<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>扫码充电</title>
<#assign base=request.contextPath  />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    <script type="text/javascript" src="${base}/js/jquery-1.8.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/Yang/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/Yang/layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/css/keyboard.css"/>
    <script src="${base}/Yang/layui/layui.all.js"></script>
    <script src="${base}/Yang/keyboard.js"></script>

</head>
<style>
    .table1 tr td{text-align:center;width:14.285%;}
    .table1 tr td div{width:90%;height:30px;line-height:30px;border-radius:5px;margin:0 auto;background-color:white;box-shadow:0 0 5px #000 inset;}
    .chepai {
        border: 0px solid red;
        text-align: center;
        line-height: 43px;
        width: 11%;
        height: 42px;
        font-size: 16px;
        float: left;
        display: inline;
        color: white;
        background-color: #9AC747;
        border-radius: 3px;
    }
    span .chepai{
        margin-left:2px;
    }
    .table2 tr td{text-align:center;width:10%;}
    .table2 tr td div{width:80%;height:30px;line-height:30px;border-radius:5px;margin:0 auto;background-color:white;box-shadow:0 0 5px #000 inset;}
    .center{
        padding: 30px 0px;
        text-align: center;
    }
    .center select{
        width: 90%;
        height: 40px;
        margin-top: 20px;
        border-radius: 5px;
        border: 1px solid #CCCCCC;
        border-top-color: rgb(204, 204, 204);
        border-right-color: rgb(204, 204, 204);
        border-bottom-color: rgb(204, 204, 204);
        border-left-color: rgb(204, 204, 204);
        color: #777;
        border-color: #e6e6e6;
        background-color: #F2F2F2;
    }
    .layui-btn{
        border-radius: 5px;
    }
    .layui-btn-fluid {
        width: 90%;
        margin-left: 5%;
    }

</style>
<body>


<div class="center">

    <h2 >输入车牌</h2>
            <h5 style="color: #9AC747;">新能源汽车</h5>
    <#--<select id="car_type">-->
        <#--<option value="1">普通汽车</option>-->
        <#--<option value="2"  selected="">新能源汽车</option>-->
    <#--</select>-->
    <div style="margin-top:30px;width: 97%;margin-left: 5%;">

		<span>
            <div class="chepai">
            </div>
			<div class="chepai">
            </div>
			<div class="chepai">
            </div>
			<div class="chepai">
            </div>
			<div class="chepai">
            </div>
			<div class="chepai">
            </div>
			<div class="chepai">
            </div>
			<div class="chepai" id="last_p">
                
            </div>
		</span>
        <div style="clear:both;"></div>
    </div>
</div>
</li>


<div id="chepai_input1" style="width:100%;height:180px;position:fixed;background-color:#CED3D9;z-index:100000;display:none;bottom: 0">
    <table class="table1" style="width:100%;height:180px;" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td><div class="o">鲁</div></td>
            <td><div class="o">津</div></td>
            <td><div class="o">沪</div></td>
            <td><div class="o">渝</div></td>
            <td><div class="o">蒙</div></td>
            <td><div class="o">新</div></td>
            <td><div class="o">藏</div></td>
        </tr>
        <tr>
            <td><div class="o">宁</div></td>
            <td><div class="o">桂</div></td>
            <td><div class="o">港</div></td>
            <td><div class="o">澳</div></td>
            <td><div class="o">黑</div></td>
            <td><div class="o">吉</div></td>
            <td><div class="o">辽</div></td>
        </tr>
        <tr>
            <td><div class="o">晋</div></td>
            <td><div class="o">冀</div></td>
            <td><div class="o">青</div></td>
            <td><div class="o">京</div></td>
            <td><div class="o">豫</div></td>
            <td><div class="o">苏</div></td>
            <td><div class="o">皖</div></td>
        </tr>
        <tr>
            <td><div class="o">浙</div></td>
            <td><div class="o">闽</div></td>
            <td><div class="o">赣</div></td>
            <td><div class="o">湘</div></td>
            <td><div class="o">鄂</div></td>
            <td><div class="o">粤</div></td>
            <td><div class="o">琼</div></td>
        </tr>
        <tr>
            <td><div class="o">甘</div></td>
            <td><div class="o">陕</div></td>
            <td><div class="o">黔</div></td>
            <td><div class="o">滇</div></td>
            <td><div class="o">川</div></td>
            <td onclick="close_0()" colspan="2"><div>关闭</div></td>
        </tr>
    </table>
</div>
<div id="chepai_input2" style="width:100%;height:180px;position:fixed;background-color:#CED3D9;z-index:100000;display:none;bottom: 0">
    <table class="table2" style="width:100%;height:180px;" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td><div class="o">1</div></td>
            <td><div class="o">2</div></td>
            <td><div class="o">3</div></td>
            <td><div class="o">4</div></td>
            <td><div class="o">5</div></td>
            <td><div class="o">6</div></td>
            <td><div class="o">7</div></td>
            <td><div class="o">8</div></td>
            <td><div class="o">9</div></td>
            <td><div class="o">0</div></td>
        </tr>
        <tr>
            <td><div class="o">Q</div></td>
            <td><div class="o">W</div></td>
            <td><div class="o">E</div></td>
            <td><div class="o">R</div></td>
            <td><div class="o">T</div></td>
            <td><div class="o">Y</div></td>
            <td><div class="o">U</div></td>
            <td><div class="o">I</div></td>
            <td><div class="o">O</div></td>
            <td><div class="o">P</div></td>
        </tr>
        <tr>
            <td><div class="o">A</div></td>
            <td><div class="o">S</div></td>
            <td><div class="o">D</div></td>
            <td><div class="o">F</div></td>
            <td><div class="o">G</div></td>
            <td><div class="o">H</div></td>
            <td><div class="o">J</div></td>
            <td><div class="o">K</div></td>
            <td><div class="o">L</div></td>
            <td><div class="o">Z</div></td>
        </tr>
         <tr>
            <td><div class="o">X</div></td>
            <td><div class="o">C</div></td>
            <td><div class="o">V</div></td>
            <td><div class="o">B</div></td>
            <td><div class="o">N</div></td>
            <td><div class="o">M</div></td>
            <td onclick="close_0()" colspan="4"><div>关闭</div></td>
        </tr>
    </table>
</div>
     <button class="layui-btn layui-btn-fluid" style="background-color: #9AC747;font-size: 18px;" onclick="scan()"><i class="layui-icon" style="font-size: 21px">&#xe660;</i> 扫码
    </button>

<script>
    /*   wx.config({
           debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
           appId: 'wx527c0fab091caf90', // 必填，公众号的唯一标识
           timestamp: new Date().getTime(), // 必填，生成签名的时间戳
           nonceStr: 'zzy', // 必填，生成签名的随机串
           signature: 'zhangziyi',// 必填，签名
           jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表
       });*/



    //扫码充电
    function scan() {
        layer.load(1);

        //获取车牌   去掉换行 去掉空格
        var carBland = $(".chepai").text().replace(/[\r\n]/g,"").replace(/\ +/g,"");
        if(carBland==null||carBland==""){
            alert("请输入车牌")
            layer.closeAll('loading');
            return;
        }
        //余额充足 才可以扫码
        if(checkMoeny(carBland)){
            $.ajax({
                url: "${base}/scan/getJSSDK",
                type: "post",
                data: {
                    url: location.href.split('#')[0]
                },
                async: false,
                success: function (data) {

                    data = JSON.parse(data)
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.appid, // 必填，公众号的唯一标识
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填，生成签名的随机串
                        signature: data.signature,// 必填，签名，见附录1
                        jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });

                    wx.error(function (res) {
                        layer.closeAll('loading');
                        alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
                    });

                    wx.ready(function () {

                        //扫码
                        wx.scanQRCode({
                            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                            scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
                            success: function (res) {
                                layer.closeAll('loading');
                                layer.load();
                                checkCharge(res.resultStr,carBland)
                            },
                            error: function () {
                                layer.closeAll('loading');
                                console.log('123');
                            },
                            cancel:function(){
                                layer.closeAll('loading');
                            }
                        });
                    });


                }

            });
        }else{
            layer.closeAll('loading');
        }

    }

    //检查车辆余额是否充足   车牌   余额充足才可以充电
    function checkMoeny(carBland) {
        var flag=false;
        $.ajax({
            url: "${base}/scan/checkMoeny",
            type: "post",
            async: false,
            data: {
                carBland: carBland
            },
            success: function (data) {
                if (data.success == 2) {
                    alert(data.msg)
                } else {
                    flag=true;
                }

            },
            complete: function(XMLHttpRequest, textStatus) {
                    // 通过XMLHttpRequest取得响应头，sessionstatus
                    var sessionstatus = XMLHttpRequest.getResponseHeader("sessionstatus");
                    if(sessionstatus){
                        if (sessionstatus == "TIMEOUT") {
                            var win = window;
                            while (win != win.top){
                                win = win.top;
                            }
                            win.location.href= XMLHttpRequest.getResponseHeader("CONTEXTPATH");
                        }
                    }else{
                        if(textStatus!="success"){
                            var win = window;
                            while (win != win.top){
                                win = win.top;
                            }
                            win.location.href= XMLHttpRequest.getResponseHeader("CONTEXTPATH");
                        }
                    }
            }
        });
        return flag;
    }
    //检测设备
    function checkCharge(connStr,carBland) {

        $.ajax({
            url: "${base}/scan/checkCharge",
            type: "post",
            async: false,
            data: {
                param: connStr
            },
            success: function (data) {
                if (data.SuccStat == 0) {
                    //检测通过 启动充电
                    useCharge(connStr,carBland);
                } else {
                    if (data.FailReason == 1) {
                        alert("此设备未插枪")
                        layer.closeAll('loading');
                    }
                    if (data.FailReason == 2) {
                        //检测通过 启动充电  ********************************************************
                        //   useCharge(connStr);
                        alert("设备检测失败")
                        layer.closeAll('loading');
                    } else {
                        alert("检测失败...错误代码：" + data.FailReason)
                        layer.closeAll('loading');
                    }
                }
            }

        });
    }
    var order = "";
    //启动充电
    function useCharge(connStr,carBland) {
        var openId = "${openId}";
        $.ajax({
            url: "${base}/scan/useCharge",
            type: "post",
            async: false,
            data: {
                param: connStr,
                openID: openId,
                carPlant:carBland
            },
            success: function (data) {
                if (data.msg != null) {
                    alert("余额不足");
                    closeWindo();
                }
                order = data.StartChargeSeq;
                if (data.SuccStat == 0) {
                    if (data.StartChargeSeqStat == 1) {
                        alert("正在启动中...");
                        //正在启动  启动结果 通知给用户

                        setTimeout(function () {
                            getStat(order);
                            closeWindo(order);
                        }, 4000);
                    } else {
                        layer.closeAll('loading');
                        if (data.StartChargeSeqStat == 2) {
                            alert("启动成功..充电中....");
                        }
                        if (data.StartChargeSeqStat == 4) {
                            alert("该订单已经结束充电");
                        }
                        if (data.StartChargeSeqStat == 5) {
                            alert("当前状态未知...");
                        } else {
                            if (data.FailReason == 1) {
                                alert("该设备不存在");
                            }
                            if (data.FailReason == 2) {
                                alert("该设备离线");
                            }
                        }
                    }

                } else {
                    layer.closeAll('loading');
                    alert("启动失败...");
                }

            }

        });
    }

    function closeWindo(order) {
        WeixinJSBridge.invoke('closeWindow', {}, function (res) {

            //alert(res.err_msg);

        });
    }

    function getStat(order) {
        var stat = "";
        $.ajax({
            url: "${base}/scan/getStat",
            type: "post",
            async: false,
            data: {
                order: order
            },
            success: function (data) {
                stat = data;

            }

        });
        return stat;
    }
</script>
<script type="text/javascript">
    var i = 0;
    $(".chepai").click(function(){
        $(".chepai").css({"background-color":"#598FFC","color":"white"});
        $(this).css({"background-color":"blue","color":"white"});
        var index = $(".chepai").index(this);
        i = index;
        if(index == 0){
            $("#chepai_input1").show();
            $("#chepai_input2").hide();
        }else{
            $("#chepai_input1").hide();
            $("#chepai_input2").show();
        }
    });
    $("#car_type").change(function(){
        var x = $(this).val();
        if(x == 1){
            $("#last_p").hide();
        }else if(x == 2){
            $("#last_p").show();
        }
    });
    $(".o").click(function(){
        var x = $(this).text();
        $(".chepai").eq(i).text(x);
        $(".chepai").css({"background-color":"#598FFC","color":"white"});

        var car_type = $("#car_type").val();
        if(car_type == 1){
            if(i == 0){
                $("#chepai_input1").hide();
                $("#chepai_input2").show();
            }else if(i > 0 && i < 6){
                // $("#chepai_input2").hide();
            }else if(i == 6){
                $("#chepai_input2").hide();
            }
        }else if(car_type == 2){
            if(i == 0){
                $("#chepai_input1").hide();
                $("#chepai_input2").show();
            }else if(i > 0 && i < 7){
                // $("#chepai_input2").hide();
            }else if(i == 7){
                $("#chepai_input2").hide();
            }
        }
        i = i+1;
        $(".chepai").eq(i).css({"background-color":"blue","color":"white"});
    });
    function close_0(){
        $("#chepai_input1").hide();
        $("#chepai_input2").hide();
        $(".chepai").css({"background-color":"#598FFC","color":"white"});
    }
</script>
</body>

</html>
